import type { MaFormItem } from "@mineadmin/form";
import hasAuth from "@/utils/permission/hasAuth.ts";
import MaDictSelect from "@/components/ma-dict-picker/ma-dict-select.vue";
import { concat } from "lodash-es";
import MaDictRadio from "@/components/ma-dict-picker/ma-dict-radio.vue";
import MaRemoteSelect from "@/components/ma-remote-select/index.vue";
import { page as getRodList } from "@/plugins/ai-warning/device/api/rdDeviceRod.ts";
import { page as getVoiceList } from "@/plugins/ai-warning/file/api/rdFileVoice.ts";
import VoiceSelect from "./VoiceSelect.vue";
import { h } from "vue";
export default function getFormItems(
  formType: "add" | "edit" = "add",
  t: any,
  model: any
): MaFormItem[] {
  // 设置默认值
  if (formType === "add" && !model.online) {
    model.online = 1;
    model.type = 1;
    model.sort = 0;
    // 初始化视频流地址数组，默认两个空地址
    if (!model.url) {
      model.url = ["", ""];
    }
  }
  return concat([
    {
      label: "录像机名称",
      prop: "name",
      render: "input",
      renderProps: {
        placeholder: "请输入录像机名称",
      },
      itemProps: { rules: [{ required: true, message: "请输入录像机名称" }] },
    },
    {
      label: "录像机地址",
      prop: "addr",
      render: "input",
      renderProps: {
        placeholder: "请输入录像机地址",
      },
    },
    {
      label: "装置名称",
      prop: "rod_id",
      render: () => MaRemoteSelect,
      renderProps: {
        api: getRodList,
        apiParams: {
          page: 1,
          pageSize: 1000,
        },
        dataHandle: (response: any) => {
          if (response.code === 200 && response.data && response.data.list) {
            return response.data.list.map((rod: any) => ({
              label: rod.name,
              value: rod.id,
            }));
          }
          return [];
        },
        placeholder: "请选择装置",
        filterable: true,
        clearable: true,
      },
      itemProps: { rules: [{ required: true, message: "请选择装置" }] },
    },
    {
      label: "在线状态",
      prop: "online",
      render: () => MaDictRadio,
      renderProps: {
        multiple: false,
        data: [
          { label: "在线", value: 1 },
          { label: "离线", value: 2 },
        ],
      },
      itemProps: {
        rules: [{ required: true, message: "请选择在线状态" }],
      },
    },
    {
      label: "名称语音",
      prop: "voice_id",
      render: () => VoiceSelect,
      renderProps: {
        audioType: 1, // 设备预警语音
        placeholder: "请选择名称语音",
        apiParams: {
          page: 1,
          pageSize: 1000,
        },
        // onVoiceSelected: (voiceData: any) => {
        //   // 语音选择后，更新表单数据
        //   if (voiceData && voiceData.text) {
        //     model.voice_text = voiceData.text;
        //   }
        // },
      },
      itemProps: { rules: [{ required: true, message: "请选择名称语音" }] },
    },
    {
      label: "遵守语音",
      prop: "comply_id",
      render: () => VoiceSelect,
      renderProps: {
        audioType: 3, // 提示语音
        placeholder: "请选择遵守语音",
        apiParams: {
          page: 1,
          pageSize: 1000,
        },
        // onVoiceSelected: (voiceData: any) => {
        //   // 语音选择后，更新表单数据
        //   if (voiceData && voiceData.text) {
        //     model.comply_text = voiceData.text;
        //   }
        // },
      },
      itemProps: { rules: [{ required: true, message: "请选择遵守语音" }] },
    },
    {
      label: "视频流全地址",
      prop: "url",
      render: () => {
        return h("div", { class: "url-inputs-container" }, [
          // 渲染现有的URL输入框
          ...(model.url || []).map((url: string, index: number) =>
            h(
              "div",
              {
                key: index,
                class: "url-input-item",
                style: {
                  display: "flex",
                  marginBottom: "8px",
                  alignItems: "center",
                },
              },
              [
                h("input", {
                  class: "el-input__inner",
                  style: {
                    width: "450px",
                    marginRight: "8px",
                    padding: "0px 12px",
                    border: "1px solid #dcdfe6",
                    borderRadius: "4px",
                    fontSize: "14px",
                    outline: "none",
                    boxSizing: "border-box",
                    backgroundColor: "#fff",
                  },
                  placeholder: "请输入流媒体地址",
                  value: url,
                  onInput: (e: Event) => {
                    const target = e.target as HTMLInputElement;
                    if (!model.url) model.url = [];
                    model.url[index] = target.value;
                  },
                  onFocus: (e: Event) => {
                    const target = e.target as HTMLInputElement;
                    target.style.borderColor = "#409eff";
                  },
                  onBlur: (e: Event) => {
                    const target = e.target as HTMLInputElement;
                    target.style.borderColor = "#dcdfe6";
                  },
                }),
                h(
                  "button",
                  {
                    type: "button",
                    class: "el-button el-button--danger el-button--small",
                    style: { minWidth: "60px" },
                    onClick: (e: Event) => {
                      e.preventDefault();
                      e.stopPropagation();
                      if (model.url && model.url.length > 1) {
                        model.url.splice(index, 1);
                      }
                    },
                  },
                  "删除"
                ),
              ]
            )
          ),
          // 添加按钮
          h(
            "button",
            {
              type: "button",
              class: "el-button el-button--primary el-button--small",
              style: { marginTop: "8px" },
              onClick: (e: Event) => {
                e.preventDefault();
                e.stopPropagation();
                if (!model.url) model.url = [];
                model.url.push("");
              },
            },
            "添加地址"
          ),
        ]);
      },
      itemProps: {
        rules: [
          {
            required: true,
            message: "请至少添加一个视频流地址",
            validator: (rule: any, value: any, callback: any) => {
              if (!value || !Array.isArray(value) || value.length === 0) {
                callback(new Error("请至少添加一个视频流地址"));
                return;
              }
              const hasValidUrl = value.some(
                (url: string) => url && url.trim()
              );
              if (!hasValidUrl) {
                callback(new Error("请至少输入一个有效的视频流地址"));
                return;
              }
              callback();
            },
          },
        ],
      },
    },

    {
      label: "通道号",
      prop: "channel_no",
      render: "input",
      renderProps: { placeholder: t("form.pleaseInput", { msg: "通道号" }) },
      itemProps: { rules: [{ required: true, message: "请输入通道号" }] },
    },
    {
      label: "序列号",
      prop: "device_serial",
      render: "input",
      renderProps: {
        placeholder: t("form.pleaseInput", { msg: "序列号" }),
      },
      itemProps: { rules: [{ required: true, message: "请输入序列号" }] },
    },
    {
      label: "摄像头类型",
      prop: "type",
      render: () => MaDictRadio,
      renderProps: {
        multiple: false,
        data: [
          { label: "枪机", value: 1 },
          { label: "球机", value: 2 },
        ],
      },
      itemProps: {
        rules: [{ required: true, message: "请选择摄像头类型" }],
      },
    },
    {
      label: "排序",
      prop: "sort",
      render: "input",
      renderProps: { placeholder: t("form.pleaseInput", { msg: "排序" }) },
    },
    {
      label: "备注",
      prop: "remarks",
      render: "input",
      renderProps: { placeholder: t("form.pleaseInput", { msg: "备注" }) },
    },
  ]);
}
